<template>
  <div class="personal">
    <div class="personal-img">
      <el-image :src="avatar" />
    </div>
    <div class="personal-info">
      <el-row>
        <el-col>
          <span class="name persion-title">{{ data.patientName }}</span>
          <span class="sex-age">({{ getPatientSex(data.patientSex) }}{{ data.patientAge }})</span>
        </el-col>
      </el-row>
      <el-row>
        <table class="personal-table">
          <tr>
            <template v-if="orderData.orderType == 2">
              <td style="width: 240px">订单编号：{{ orderData.apiOrderNo }}</td>
            </template>
            <template v-else>
              <td style="width: 250px">门诊编号：{{ orderData.orderNo }}</td>
            </template>
            <td style="width: 226px">就诊时间：{{ data.orderTime }}</td>
            <td style="min-width: 100px;">就诊科室：{{ data.consultDepartName }}</td>
            <td style="min-width: 100px;">就诊类型：{{ consultTypes[data.consultType] }}</td>
          </tr>
          <tr>
            <td>接诊医生：{{ data.consultDocName }}</td>
            <template v-if="orderData.deliveryType == 2">
              <td>处方号：{{ infoNo }}</td>
              <td colspan="2">取货方式：自取</td>
            </template>
            <template v-else>
              <td colspan="2" v-if="address">收货地址：
                <span style="padding-left:4px">{{address.username}}</span>
                <span style="padding-left:4px">{{address.phone}}</span>
                <span style="padding-left:4px">{{address.province}}</span>
                <span style="padding-left:2px">{{address.city}}</span>
                <span style="padding-left:2px">{{address.area}}</span>
                <span style="padding-left:2px">{{address.address}}</span>
              </td>
              <td>处方号：{{ infoNo }}</td>
              <!-- <td colspan="3" v-if="address">收货地址：{{address.username +address.phone+ address.province + address.city + address.area + address.address}}</td> -->
            </template>
          </tr>
        </table>
      </el-row>
    </div>
  </div>
</template>

<script>
import avatar from "@/assets/images/user_body.png";
import { getPatientSex } from "@/utils/index";

export default {
  name: "personal",
  props: {
    data: {
      type: Object,
      default: null
    },
    orderData: {
      type: Object,
      default: null
    },
    address: {
      type: Object,
      default: null
    },
    // 处方号
    infoNo: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      consultTypes: {1: "初诊", 2: "复诊", 3: "急诊"},
      avatar: avatar
    }
  },
  methods: {
    getPatientSex
  }
}
</script>

<style lang="scss" scoped>
.personal {
  box-shadow: 0px 3px 7px 0px rgba(3, 29, 52, 0.07);
  border: 1px solid #dcdfe6;
  align-items: center;
  border-radius: 4px;
  display: flex;

  .personal-img {
    padding: 16px;

    .el-image {
      height: 72px;
      width: 72px;
    }
  }

  .personal-info {
    flex: 1;

    .el-row {
      margin-bottom: 5px;
    }

    .name {
      padding-bottom: 2px;
      font-weight: bold;
      font-size: 18px;
    }

    .sex-age {
      padding-left: 10px;
      font-weight: 400;
      font-size: 14px;
      color: #666;
    }
  }

  .personal-table {
    padding: 0;

    tr {
      td {
        padding-right: 10px;
      }
    }
  }
}
</style>